<template>
    <!-- 内容卡片 -->
    <el-card class="box-card">
        <!-- 操作部分 -->
        <div class="caozuo">
            <el-link :underline="false" type="primary" icon="el-icon-plus" @click="drawer = true">新增</el-link>
            <el-link :underline="false" type="primary" icon="el-icon-download" @click="exportToExcel">导出</el-link>
            <el-upload style="display: inline-block;" class="upload-demo"
                action="https://jsonplaceholder.typicode.com/posts/" :on-change="handleChange" :file-list="fileList1">
                <el-link :underline="false" type="primary" icon="el-icon-upload2">导入</el-link>
            </el-upload>
            <p>已选择<span>{{ selectedCount }}</span>项</p>
            <!-- <el-link :underline="false" type="primary" icon="el-icon-setting" style="margin-left: 810px;">自定义列</el-link> -->
        </div>
        <!-- 表格部分 -->
        <el-table :data="users" border style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="60">
            </el-table-column>
            <el-table-column fixed="left" label="#" type="index" width="60">
            </el-table-column>
            <el-table-column fixed="left" prop="accountNo" label="账号" width="240">
            </el-table-column>
            <el-table-column fixed="left" prop="name" label="账户名" width="180" column-key="date">
            </el-table-column>
            <el-table-column prop="currency_dictText" label="币种" width="120">
            </el-table-column>
            <el-table-column prop="bankNo" label="行号" width="170">
            </el-table-column>
            <el-table-column prop="factor" label="账户管理员" width="120">
            </el-table-column>
            <el-table-column prop="isEnabled_dictText" label="启用" width="100">
            </el-table-column>
            <el-table-column prop="remark" label="备注" width="100">
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="180">
            </el-table-column>
            <el-table-column prop="createBy_dictText" label="创建人" width="100">
            </el-table-column>
            <el-table-column prop="updateTime" label="修改时间" width="180">
            </el-table-column>
            <el-table-column prop="updateBy_dictText" label="修改人" width="120">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="120">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="getDictItemss(scope.row)">编辑</el-button>
                    <span style="color: #ccc; font-size: 12px; margin-left: 2px;margin-right: 2px;">|</span>
                    <el-dropdown>
                        <span class="el-dropdown-link" size="small" type="text"
                            style="color: #409EFF; font-size: 12px; cursor: pointer;">
                            更多<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <!-- <el-button type="text" size="small" @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
                            <el-dropdown-item><span @click="handleDelete(scope.row.id)">删除</span></el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </template>
            </el-table-column>
        </el-table>
        <!-- 添加窗口 -->
        <el-drawer title="银行账户-新增" :visible.sync="drawer" :direction="direction" :before-close="handleClose" size="40%">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"
                max-height="250px">
                <el-form-item label="账号" prop="accountNo">
                    <el-input v-model="ruleForm.accountNo" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="账户名" prop="name">
                    <el-input v-model="ruleForm.name" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="币种" prop="currency_dictText">
                    <el-select v-model="ruleForm.currency_dictText">
                        <el-option label="CNY" value="CNY"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="行号" prop="bankNo">
                    <el-input v-model="ruleForm.bankNo" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="启用" prop="isEnabled">
                    <el-select v-model="ruleForm.isEnabled" placeholder="请选择">
                        <el-option label="是" value="1"></el-option>
                        <el-option label="否" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="账户管理员">
                    <el-select v-model="ruleForm.zzz" placeholder="请选择">
                    </el-select>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input type="textarea" v-model="ruleForm.remark"></el-input>
                </el-form-item>
                <div class="demo-drawer__footer">
                    <el-button @click="cancelForm">取 消</el-button>
                    <el-button type="primary" @click="submitForm">确定</el-button>
                </div>
            </el-form>
            <!-- 操作信息部分 -->
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="kaipiaoxinxi"
                max-height="250px">
                <el-form-item style="margin-left: -50px;" v-if="isFirstCaoZuoInfoVisible">
                    <i class="el-icon-arrow-right"></i>
                    <el-link style="margin-left: 10px;" :underline="false" @click="toggleCaoZuoInfo">操作信息</el-link>
                </el-form-item>
            </el-form>
            <el-form v-if="isCaoZuoInfoVisible" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px"
                class="kaipiaoxinxi" max-height="250px">
                <el-form-item style="margin-left: -50px;">
                    <i class="el-icon-arrow-down"></i>
                    <el-link style="margin-left: 10px;" :underline="false" @click="toggleCaoZuoInfo">操作信息</el-link>
                </el-form-item>
                <el-form-item label="创建时间">
                    <el-date-picker v-model="value1" type="date" disabled algin="right" style="width: 510px;">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="创建人">
                    <el-select v-model="ruleForm.region" placeholder="请选择" disabled>
                    </el-select>
                </el-form-item>
                <el-form-item label="修改时间">
                    <el-date-picker v-model="value1" type="date" disabled algin="right" style="width: 510px;">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="修改人">
                    <el-select v-model="ruleForm.region" placeholder="请选择" disabled>
                    </el-select>
                </el-form-item>
            </el-form>
        </el-drawer>
        <!-- 编辑窗口 -->
        <el-drawer title="银行账户-编辑" :visible.sync="dialogVisible" :direction="direction" :before-close="handleClose"
            size="40%">
            <el-form :model="userform" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"
                max-height="250px">
                <el-form-item label="账号" prop="accountNo">
                    <el-input v-model="userform.accountNo" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="账户名" prop="name">
                    <el-input v-model="userform.name" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="币种" prop="currency_dictText">
                    <el-input v-model="userform.currency_dictText" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="行号" prop="bankNo">
                    <el-input v-model="userform.bankNo" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="启用" prop="isEnabled">
                    <el-select v-model="userform.isEnabled" placeholder="请选择">
                        <el-option label="是" value="1"></el-option>
                        <el-option label="否" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="账户管理员">
                    <el-select v-model="userform.zzz" placeholder="请选择">
                    </el-select>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input type="textarea" v-model="userform.remark"></el-input>
                </el-form-item>
                <div class="demo-drawer__footer">
                    <el-button @click="cancelForm1">取 消</el-button>
                    <el-button type="primary" @click="bj">确定</el-button>
                </div>
            </el-form>
            <!-- 操作信息部分 -->
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="kaipiaoxinxi"
                max-height="250px">
                <el-form-item style="margin-left: -50px;" v-if="isFirstCaoZuoInfoVisible">
                    <i class="el-icon-arrow-right"></i>
                    <el-link style="margin-left: 10px;" :underline="false" @click="toggleCaoZuoInfo">操作信息</el-link>
                </el-form-item>
            </el-form>
            <el-form v-if="isCaoZuoInfoVisible" :model="userform" :rules="rules" ref="ruleForm" label-width="100px"
                class="kaipiaoxinxi" max-height="250px">
                <el-form-item style="margin-left: -50px;">
                    <i class="el-icon-arrow-down"></i>
                    <el-link style="margin-left: 10px;" :underline="false" @click="toggleCaoZuoInfo">操作信息</el-link>
                </el-form-item>
                <el-form-item label="创建时间">
                    <el-date-picker v-model="userform.createTime" type="date" disabled algin="right"
                        style="width: 385px;">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="创建人">
                    <el-select v-model="userform.createBy" placeholder="请选择" disabled>
                    </el-select>
                </el-form-item>
                <el-form-item label="修改时间">
                    <el-date-picker v-model="userform.updateTime" type="date" disabled algin="right"
                        style="width: 385px;">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="修改人">
                    <el-select v-model="userform.updateBy" placeholder="请选择" disabled>
                    </el-select>
                </el-form-item>
            </el-form>
        </el-drawer>
        <!-- 分页 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="list.pageNo"
            :page-sizes="[5, 10, 20, 50]" :page-size="list.pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
    </el-card>

</template>
<script>
// import { basCustomer, basCustomeradd, basCustomerdelete,getDictItems } from '@/api/jiekou'
import { apiServe } from '@/api/jiekou';
import * as XLSX from 'xlsx';
export default {
    data() {
        return {
            selectedCount: 0, // 选中的行数
            userform: {},// 编辑窗口
            fileList1: [],// 导入的
            fileList: [],// 附件的
            list: {
                _t: Math.floor(new Date().getTime() / 1000),  
                column: 'createTime',
                order: ' desc',
                field: 'id,,,billNo,billDate,subject,customerId_dictText,invoiceType_dictText,invoiceNo,invoiceDate,amt,billStage_dictText,isEffective_dictText,isClosed_dictText,isVoided_dictText,isAuto_dictText,isRubric_dictText,remark,effectiveTime,approver_dictText,createTime,createBy_dictText,sysOrgCode_dictText,updateTime,updateBy_dictText,action',
                pageNo: 1,
                pageSize: 10,
            },
            // 分页
            page: {
                pages: 1,
                size: 10,
            },
            // 总条数
            total: 0,
            formInline: {
                user: '',
                region: ''
            },
            table: false,
            dialog: false,
            // loading: false,
            // timer: null,
            num: '',
            users: [],
            ruleForm: {
                accountNo: "",
                currency: "",
                isEnabled: "",
                name: "",
                currency_dictText: 'CNY' // 直接赋初值
            },
            // 校验规则
            rules: {
                accountNo: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                ],
                name: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                ],
                currency_dictText: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                ],
                isEnabled: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                ],
            },
            value: [],
            options: [{
                value: 'zhinan',
                label: '指南',
                children: [{
                    value: 'shejiyuanze',
                    label: '设计原则',
                    children: [{
                        value: 'yizhi',
                        label: '一致'
                    }, {
                        value: 'fankui',
                        label: '反馈'
                    }, {
                        value: 'xiaolv',
                        label: '效率'
                    }, {
                        value: 'kekong',
                        label: '可控'
                    }]
                }],
            }],
            value1: [],
            options1: [{
                value: 'zhinan',
                label: '指南',
                children: [{
                    value: 'shejiyuanze',
                    label: '设计原则',
                    children: [{
                        value: 'yizhi',
                        label: '一致'
                    }, {
                        value: 'fankui',
                        label: '反馈'
                    }, {
                        value: 'xiaolv',
                        label: '效率'
                    }, {
                        value: 'kekong',
                        label: '可控'
                    }]
                }],
            }],
            // 添加
            drawer: false, // 控制抽屉的显示与隐藏
            // 编辑
            dialogVisible: false,
            direction: 'rtl',
            loading: false,
            timer: null,
            isExpanded: false, // 新增属性，控制表单的展开与收起状态
            isFirstKaiPiaoInfoVisible: true, // 控制第一个开票信息链接的显示与隐藏
            isKaiPiaoInfoVisible: false, // 控制第二个开票信息表单的显示与隐藏
            isFirstBanKuanInfoVisible: true,// 控制第一个办款资料的显示与隐藏
            isBanKuanInfoVisible: false,// 控制第二个办款资料的显示与隐藏
            isFirstShouJianInfoVisible: true,// 控制第一个收件信息的显示与隐藏
            isShouJianInfoVisible: false,// 控制第二个收件信息的显示与隐藏
            isFirstCaiWuInfoVisible: true,// 控制第一个财务信息的显示与隐藏
            isCaiWuInfoVisible: false,// 控制第二个财务信息的显示与隐藏
            isFirstQiTaInfoVisible: true,// 控制第一个其他信息的显示与隐藏
            isQiTaInfoVisible: false,// 控制第二个其他信息的显示与隐藏
            isFirstCaoZuoInfoVisible: true,// 控制第一个操作信息的显示与隐藏
            isCaoZuoInfoVisible: false,// 控制第二个操作信息的显示与隐藏
        }
    },
    methods: {
        // 渲染客户列表
        async basBankAccount() {
            let res = await apiServe.basBankAccount(this.list)
            this.users = res.result.records
            // console.log(res.result.records)
            this.total = res.result.total;
        },
        // 点击查询
        async search() {
            let res = await apiServe.basBankAccount(this.list)
            // console.log(res.result.records, '111111111111')
            // this.totalCount = res.total
            this.users = res.result.records
        },
        czhi() {
            this.list.code = ''
            this.list.name = ''
        },
        // 添加点击取消按钮
        cancelForm() {
            this.loading = false;
            this.drawer = false; // 关闭抽屉
            clearTimeout(this.timer); // 清除可能存在的定时器
        },
        // 编辑点击取消按钮
        cancelForm1() {
            this.loading = false;
            this.dialogVisible = false; // 关闭抽屉
            clearTimeout(this.timer); // 清除可能存在的定时器
        },
        // 点击确定添加
        async submitForm() {
            this.$confirm('是否添加', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                let res = await apiServe.basBankAccountadd(this.ruleForm)
                if (res.success) {
                    this.$message({
                        type: 'success',
                        message: '添加成功!'
                    });
                    this.drawer = false; // 关闭抽屉
                    this.resetForm(); // 清空表单数据
                    this.basBankAccount();
                } else {
                    this.$message.error('添加失败: ' + res.message);
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消添加'
                });
            });
            // // 提交表单的逻辑
            // // this.loading = true;
            // // 模拟表单提交
            // let res = await apiServe.basCustomeradd(this.ruleForm)
            // // console.log(res, '111')
            // this.drawer = false; // 关闭抽屉
            // this.resetForm(); // 清空表单数据
            // this.basCustomer();
        },
        resetForm() {
            this.ruleForm = {
                code: '',
                name: '',
                auxName: '',
                isEnabled: '',
                desc: ''
            };
        },
        // 关闭添加抽屉
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        },
        // 点击删除按钮
        async handleDelete(id) {
            // console.log(row.id, '222');
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                let res = await apiServe.basBankAccountdelete({ id });
                if (res.success) {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    // 重新加载数据以更新表格
                    this.basBankAccount();
                } else {
                    this.$message.error('删除失败: ' + res.message);
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        // // 点击编辑按钮
        getDictItemss(row) {
            this.dialogVisible = true
            this.userform = row
        },
        // 确认编辑
        async bj() {
            // let res = await apiServe.basCustomeredit(this.userform);
            // // 1.关闭窗口
            // this.dialogVisible = false
            // // // 2.更新页面
            // this.basCustomer()
            // // // 3.清空之前的数据
            // // this.userform = {}
            this.$confirm('是否编辑', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                let res = await apiServe.basBankAccountedit(this.userform);
                if (res.success) {
                    this.$message({
                        type: 'success',
                        message: '编辑成功!'
                    });
                    // 1.关闭窗口
                    this.dialogVisible = false
                    // // 2.更新页面
                    this.basBankAccount()
                } else {
                    this.$message.error('编辑失败: ' + res.message);
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消编辑'
                });
            });
        },
        // 切换操作面板
        toggleForm() {
            this.isExpanded = !this.isExpanded; // 切换isExpanded的值
        },
        // 切换开票信息表单
        toggleKaiPiaoInfo() {
            this.isKaiPiaoInfoVisible = !this.isKaiPiaoInfoVisible; // 切换第二个开票信息表单的显示与隐藏
            this.isFirstKaiPiaoInfoVisible = !this.isFirstKaiPiaoInfoVisible; // 切换第一个开票信息链接的显示与隐藏
        },
        // 切换办款资料表单
        toggleBanKuanInfo() {
            this.isBanKuanInfoVisible = !this.isBanKuanInfoVisible; // 切换第二个办款资料的显示与隐藏
            this.isFirstBanKuanInfoVisible = !this.isFirstBanKuanInfoVisible; // 切换第一个办款资料的显示与隐藏
        },
        // 切换收件信息表单
        toggleShouJianInfo() {
            this.isShouJianInfoVisible = !this.isShouJianInfoVisible; // 切换第二个收件信息的显示与隐藏
            this.isFirstShouJianInfoVisible = !this.isFirstShouJianInfoVisible; // 切换第一个收件信息的显示与隐藏
        },
        // 切换财务信息表单
        toggleCaiWuInfo() {
            this.isCaiWuInfoVisible = !this.isCaiWuInfoVisible; // 切换第二个财务信息的显示与隐藏
            this.isFirstCaiWuInfoVisible = !this.isFirstCaiWuInfoVisible; // 切换第一个财务信息的显示与隐藏
        },
        // 切换其他信息表单
        toggleQiTaInfo() {
            this.isQiTaInfoVisible = !this.isQiTaInfoVisible; // 切换第二个其他信息的显示与隐藏
            this.isFirstQiTaInfoVisible = !this.isFirstQiTaInfoVisible; // 切换第一个其他信息的显示与隐藏
        },
        // 切换操作信息表单
        toggleCaoZuoInfo() {
            this.isCaoZuoInfoVisible = !this.isCaoZuoInfoVisible; // 切换第二个操作信息的显示与隐藏
            this.isFirstCaoZuoInfoVisible = !this.isFirstCaoZuoInfoVisible; // 切换第一个操作信息的显示与隐藏
        },
        // 点击附件上传
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        },
        handleExceed(files, fileList) {
            this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
        },
        beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${file.name}？`);
        },
        // 导出
        exportToExcel() {
            // 将数据转换为工作表
            const worksheet = XLSX.utils.json_to_sheet(this.users);

            // 创建工作簿并添加工作表
            const workbook = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

            // 导出Excel文件
            XLSX.writeFile(workbook, 'data.xlsx');
        },
        // 导入
        handleChange(file, fileList1) {
            this.fileList1 = fileList1.slice(-3);
        },
        // 选中的行数
        handleSelectionChange(selection) {
            this.selectedCount = selection.length;
        },
        // 分页器
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.list.pageSize = val

            this.basBankAccount()
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.list.pageNo = val
            this.basBankAccount()
        },
    },
    mounted() {
        this.basBankAccount();
        // this, token();
    }
}
</script>
<style>
.el-upload-list {
    display: inline-block;
}

.text {
    font-size: 14px;
}

.item {
    padding: 18px 0;
}

.box-card {
    margin: 10px;
    width: 100%;
    /* width: 1290px; */

}

.caozuo {
    margin-bottom: 10px;
}

.caozuo p {
    display: inline-block;
    margin-left: 30px;
}

.caozuo p span {
    color: #409EFF;
}

.el-link {
    margin-left: 30px;
}

.demo-form-inline.el-form-item {
    margin-left: 10px;
}

.demo-ruleForm .el-form-item {
    margin-left: 10%;
    margin-right: 10%;
}

.demo-ruleForm .el-select {
    width: 385px;
}


.el-input-number .el-input__inner {
    text-align: left;
}

.demo-drawer__footer {
    position: absolute;
    bottom: -8px;
    width: 100%;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    left: 0;
    background: #fff;
    border-radius: 0 0 2px 2px;
    z-index: 999;
}

/* 为el-drawer的主体部分设置滚动条 */
.el-drawer__body {
    overflow: auto;
    /* 当内容超出时自动显示滚动条 */
    /* 可选：定义一个最大高度，根据实际情况调整 */
    max-height: calc(100vh - 100px);
    /* 举例，视具体情况而定 */
}

/* 为了美观，可以自定义滚动条的样式 */
/* 定义滚动条的宽度 */
.el-drawer__body::-webkit-scrollbar {
    width: 8px;
}

/* 定义滚动条轨道 */
.el-drawer__body::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

/* 定义滑块 */
.el-drawer__body::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

/* 定义滑块在鼠标按下时的样式 */
.el-drawer__body::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.kaipiaoxinxi .el-form-item {
    margin-left: 10%;
    margin-right: 10%;
}

.kaipiaoxinxi .el-select {
    width: 385px;
}
</style>